<template>
  <div class="sync">
    <div class="content">
      <div><img :scr="data.url" /></div>
      <div class="pop">
        <div>{{ data.name }}</div>
        <div>&nbsp;{{ data.age }}</div>
      </div>
    </div>
    <hr />
    <div>{{ data.desc }}</div>
  </div>
</template>

<script setup lang="ts">
import { ajax_axios } from '@/axios/ajaxAxios.ts';
// 发送请求
const url: string = './suspenseTest.json';
// ajax_axios.get(url).then(({ data }) => {
//   console.log(data);
// });
interface Data {
  name: string;
  age: number;
  desc: string;
  url: string;
}
// 使用顶层 await。结果代码会被编译成 async setup(),组件变成异步组件,所以必须嵌套在＜Suspense＞中才能进行渲染
const { data } = await ajax_axios.get<Data>(url);
console.log(data);
</script>

<style lang="scss" scoped></style>
